<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>App用户行为数据分析</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <script type="text/javascript" src="/static/js/vue.min.js"></script>
    <script type="text/javascript" src="/static/js/index.js"></script>
    <script type="text/javascript" src="/static/js/echarts.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
</head>
<body>

<div id="daapp">
    <el-row>
        <el-col :span="12" style="text-align:center;">
            <div class="grid-content bg-purple">
                <el-date-picker v-model="dateValue1" size="small" type="daterange" value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" @change="changedate1">
                </el-date-picker>
                <div id="main" class="chart-container"
                     style="width:100%; height:67vh;margin:0 auto;background-color:#fff;"></div>
            </div>
        </el-col>
        <el-col :span="12" style="text-align:center;">
            <div class="grid-content bg-purple">
                <el-date-picker
                        v-model="nianvalue1"
                        size="small"
                        type="year"
                        placeholder="选择年"
                        @change="changedate2">
                </el-date-picker>
                <el-select v-model="value1" size="small" placeholder="请选择" @change="changedate5">
                    <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <div id="main1" class="chart-container"
                     style="width:100%; height:67vh;margin:0 auto;background-color:#fff;"></div>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12" style="text-align:center;">
            <div class="grid-content bg-purple">
                <el-select v-model="value2" size="small" placeholder="请选择" @change="changedate6">
                    <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <div id="main2" class="chart-container"
                     style="width:100%; height:67vh;margin:0 auto;background-color:#fff;"></div>
            </div>
        </el-col>
        <el-col :span="12" style="text-align:center;">
            <div class="grid-content bg-purple">
                <el-date-picker
                        v-model="riqivalue1"
                        type="date"
                        placeholder="选择日期"
                        @change="changedate7">
                </el-date-picker>
                <div id="main4" class="chart-container"
                     style="width:100%; height:67vh;margin:0 auto;background-color:#fff;"></div>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12" style="text-align:center;">
            <div class="grid-content bg-purple">
                <el-select v-model="value" size="small" placeholder="请选择" @change="changedate4">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-date-picker
                        v-model="nianvalue2"
                        size="small"
                        clearable
                        type="year"
                        placeholder="选择年"
                        @change="changedate3">
                </el-date-picker>
                <div id="main3" class="chart-container" style="width:100%; height:30vh;margin:0 auto;background-color:#fff;"></div>
            </div>
        </el-col>
        <el-col :span="12" style="text-align:center;">
            <div class="grid-content bg-purple">
            </div>
        </el-col>
    </el-row>
</div>
<script>
    new Vue({
        data() {
            return {
                active: 2,
                clearable: false,
                dateValue1: ["{{ start_date }}", "{{ end_date }}"],
                nianvalue1: "{{ year }}",
                nianvalue2: "{{ year }}",
                riqivalue1: "{{ end_date }}",
                options: [{
                    value: '老用户',
                    label: '老用户'
                }, {
                    value: '新用户',
                    label: '新用户'
                }, {
                    value: '启动次数',
                    label: '启动次数'
                }, {
                    value: '启动用户',
                    label: '启动用户'
                }, {
                    value: '版本老用户',
                    label: '版本老用户'
                }],
                value: '新用户',
                options1: [{
                    value: 'mean',
                    label: '均值'
                }, {
                    value: 'sum',
                    label: '求和'
                }, {
                    value: 'std',
                    label: '标准差'
                }, {
                    value: 'var',
                    label: '方差'
                }, {
                    value: 'sem',
                    label: '均值标准误'
                }],
                value1: 'mean',
                value2: 'mean',
            }
        },
        mounted() {
            this.huoqushuju("{{ start_date }}", "{{ end_date }}");
            this.huoqushuju1("{{ year }}", this.value1);
            this.huoqushuju2(this.value2);
            this.huoqushuju3("{{ year }}", this.value);
            this.huoqushuju4("{{ end_date }}");
        },
        methods: {
            changedate1(data) {
                // 确定时间范围之后触发的函数
                this.huoqushuju(new Date(data[0]).toLocaleString().replace(/:\d{1,2}$/, ' '), new Date(data[1]).toLocaleString().replace(/:\d{1,2}$/, ' '));
            }, changedate2(data) {
                // 确定时间范围之后触发的函数
                if (data !== null) {
                    this.huoqushuju1(new Date(data).getFullYear(), this.value1);
                }
            }, changedate3(data) {
                // 确定时间范围之后触发的函数
                if (data === null) {
                    this.active = 1;
                } else {
                    this.active = 2;
                }
                if (this.active === 2) {
                    this.huoqushuju3(new Date(data).getFullYear(), this.value);
                }
            }, changedate4(value) {
                if (new Date(this.nianvalue2).getFullYear() === 1970) {
                    this.active = 1;
                } else {
                    this.active = 2;
                }
                if (this.active === 2) {
                    this.huoqushuju3(new Date(this.nianvalue2).getFullYear(), value);
                }
            }, changedate5(value) {
                if ((new Date(this.nianvalue1).getFullYear()) !== 1970) {
                    this.huoqushuju1((new Date(this.nianvalue1).getFullYear()), value);
                }
            }, changedate6(value) {
                this.huoqushuju2(value);
            }, changedate7(data) {
                // 确定时间范围之后触发的函数
                this.huoqushuju4(new Date(data).toLocaleString().replace(/:\d{1,2}$/, ' '));
            }, huoqushuju(dater1, dater2) {
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=yonghuqushi&start_date=" + dater1 + "&end_date=" + dater2,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            title: {
                                text: '用户趋势-日期段'
                            },
                            toolbox: {
                                right: 50,
                                feature: {
                                    myFull: {
                                        show: true,
                                        title: '全屏',
                                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                        onclick: (e) => {
                                            // 全屏查看
                                            if (chartDom.requestFullScreen) { // HTML W3C 提议
                                                chartDom.requestFullScreen()
                                            } else if (chartDom.msRequestFullscreen) { // IE11
                                                chartDom.msRequestFullScreen()
                                            } else if (chartDom.webkitRequestFullScreen) { // Webkit
                                                chartDom.webkitRequestFullScreen()
                                            } else if (chartDom.mozRequestFullScreen) { // Firefox
                                                chartDom.mozRequestFullScreen()
                                            }
                                            // 退出全屏
                                            if (chartDom.requestFullScreen) {
                                                document.exitFullscreen()
                                            } else if (chartDom.msRequestFullScreen) {
                                                document.msExitFullscreen()
                                            } else if (chartDom.webkitRequestFullScreen) {
                                                document.webkitCancelFullScreen()
                                            } else if (chartDom.mozRequestFullScreen) {
                                                document.mozCancelFullScreen()
                                            }
                                            window.onresize = function () {
                                                myChart.resize()
                                            }
                                        }
                                    }
                                }
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {},
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: datat.data.shijian
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value}'
                                }
                            },
                            series: [
                                {
                                    name: '老用户',
                                    type: 'line',
                                    data: datat.data.laoyonghu
                                },
                                {
                                    name: '新用户',
                                    type: 'line',
                                    data: datat.data.xinyonghu
                                },
                                {
                                    name: '启动次数',
                                    type: 'line',
                                    data: datat.data.qidongcishu
                                },
                                {
                                    name: '启动用户',
                                    type: 'line',
                                    data: datat.data.qidongyonghu
                                },
                                {
                                    name: '版本老用户',
                                    type: 'line',
                                    data: datat.data.banbenlaoyonghu
                                }
                            ]
                        };
                        option && myChart.setOption(option,true);

                    }
                });
            }, huoqushuju1(dater1, value33) {
                var chartDom1 = document.getElementById('main1');
                var myChart1 = echarts.init(chartDom1);
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=nianyonghuqushi&year=" + dater1 + "&shuming=" + value33,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            title: {
                                text: '用户趋势-年月'
                            },
                            toolbox: {
                                right: 50,
                                feature: {
                                    myFull: {
                                        show: true,
                                        title: '全屏',
                                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                        onclick: (e) => {
                                            // 全屏查看
                                            if (chartDom1.requestFullScreen) { // HTML W3C 提议
                                                chartDom1.requestFullScreen()
                                            } else if (chartDom1.msRequestFullscreen) { // IE11
                                                chartDom1.msRequestFullScreen()
                                            } else if (chartDom1.webkitRequestFullScreen) { // Webkit
                                                chartDom1.webkitRequestFullScreen()
                                            } else if (chartDom1.mozRequestFullScreen) { // Firefox
                                                chartDom1.mozRequestFullScreen()
                                            }
                                            // 退出全屏
                                            if (chartDom1.requestFullScreen) {
                                                document.exitFullscreen()
                                            } else if (chartDom1.msRequestFullScreen) {
                                                document.msExitFullscreen()
                                            } else if (chartDom1.webkitRequestFullScreen) {
                                                document.webkitCancelFullScreen()
                                            } else if (chartDom1.mozRequestFullScreen) {
                                                document.mozCancelFullScreen()
                                            }
                                            window.onresize = function () {
                                                myChart1.resize()
                                            }
                                        }
                                    }
                                }
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {},
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: datat.data.shijian
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value}'
                                }
                            },
                            series: [
                                {
                                    name: '老用户',
                                    type: 'line',
                                    data: datat.data.laoyonghu
                                },
                                {
                                    name: '新用户',
                                    type: 'line',
                                    data: datat.data.xinyonghu
                                },
                                {
                                    name: '启动次数',
                                    type: 'line',
                                    data: datat.data.qidongcishu
                                },
                                {
                                    name: '启动用户',
                                    type: 'line',
                                    data: datat.data.qidongyonghu
                                },
                                {
                                    name: '版本老用户',
                                    type: 'line',
                                    data: datat.data.banbenlaoyonghu
                                }
                            ]
                        };
                        option && myChart1.setOption(option,true);

                    }
                });
            }, huoqushuju2(value22) {
                var chartDom2 = document.getElementById('main2');
                var myChart2 = echarts.init(chartDom2);
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=quanbuyonghuqushi&shuming=" + value22,//这里是url  + "&shuming=" + value12
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            title: {
                                text: '用户趋势-年'
                            },
                            toolbox: {
                                right: 50,
                                feature: {
                                    myFull: {
                                        show: true,
                                        title: '全屏',
                                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                        onclick: (e) => {
                                            // 全屏查看
                                            if (chartDom2.requestFullScreen) { // HTML W3C 提议
                                                chartDom2.requestFullScreen()
                                            } else if (chartDom2.msRequestFullscreen) { // IE11
                                                chartDom2.msRequestFullScreen()
                                            } else if (chartDom2.webkitRequestFullScreen) { // Webkit
                                                chartDom2.webkitRequestFullScreen()
                                            } else if (chartDom2.mozRequestFullScreen) { // Firefox
                                                chartDom2.mozRequestFullScreen()
                                            }
                                            // 退出全屏
                                            if (chartDom2.requestFullScreen) {
                                                document.exitFullscreen()
                                            } else if (chartDom2.msRequestFullScreen) {
                                                document.msExitFullscreen()
                                            } else if (chartDom2.webkitRequestFullScreen) {
                                                document.webkitCancelFullScreen()
                                            } else if (chartDom2.mozRequestFullScreen) {
                                                document.mozCancelFullScreen()
                                            }
                                            window.onresize = function () {
                                                myChart2.resize()
                                            }
                                        }
                                    }
                                }
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {},
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: datat.data.shijian
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value}'
                                }
                            },
                            series: [
                                {
                                    name: '老用户',
                                    type: 'line',
                                    data: datat.data.laoyonghu
                                },
                                {
                                    name: '新用户',
                                    type: 'line',
                                    data: datat.data.xinyonghu
                                },
                                {
                                    name: '启动次数',
                                    type: 'line',
                                    data: datat.data.qidongcishu
                                },
                                {
                                    name: '启动用户',
                                    type: 'line',
                                    data: datat.data.qidongyonghu
                                },
                                {
                                    name: '版本老用户',
                                    type: 'line',
                                    data: datat.data.banbenlaoyonghu
                                }
                            ]
                        };
                        option && myChart2.setOption(option,true);

                    }
                });
            }, huoqushuju3(dater1, value11) {
                var chartDom3 = document.getElementById('main3');
                var myChart3 = echarts.init(chartDom3);
                var value12 = "";
                if (value11 === "老用户") {
                    value12 = "laoyonghu";
                } else if (value11 === "新用户") {
                    value12 = "xinyonghu";
                } else if (value11 === "启动次数") {
                    value12 = "qidongcishu";
                } else if (value11 === "启动用户") {
                    value12 = "qidongyonghu";
                } else if (value11 === "版本老用户") {
                    value12 = "banbenlaoyonghu";
                }
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=nianriliyonghuqushi&year=" + dater1 + "&leiming=" + value12,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            title: {
                                top: 30,
                                left: 'center',
                                text: value11 + '-日历'
                            },
                            toolbox: {
                                right: 50,
                                feature: {
                                    myFull: {
                                        show: true,
                                        title: '全屏',
                                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                        onclick: (e) => {
                                            // 全屏查看
                                            if (chartDom3.requestFullScreen) { // HTML W3C 提议
                                                chartDom3.requestFullScreen()
                                            } else if (chartDom3.msRequestFullscreen) { // IE11
                                                chartDom3.msRequestFullScreen()
                                            } else if (chartDom3.webkitRequestFullScreen) { // Webkit
                                                chartDom3.webkitRequestFullScreen()
                                            } else if (chartDom3.mozRequestFullScreen) { // Firefox
                                                chartDom3.mozRequestFullScreen()
                                            }
                                            // 退出全屏
                                            if (chartDom3.requestFullScreen) {
                                                document.exitFullscreen()
                                            } else if (chartDom3.msRequestFullScreen) {
                                                document.msExitFullscreen()
                                            } else if (chartDom3.webkitRequestFullScreen) {
                                                document.webkitCancelFullScreen()
                                            } else if (chartDom3.mozRequestFullScreen) {
                                                document.mozCancelFullScreen()
                                            }
                                            window.onresize = function () {
                                                myChart3.resize()
                                            }
                                        }
                                    }
                                }
                            },
                            tooltip: {},
                            visualMap: {
                                min: datat.data.min,
                                max: datat.data.max,
                                type: 'piecewise',
                                orient: 'horizontal',
                                left: 'center',
                                top: 65
                            },
                            calendar: {
                                top: 120,
                                left: 30,
                                right: 30,
                                cellSize: ['auto', 'auto'],
                                range: dater1,
                                itemStyle: {
                                    borderWidth: 0.5
                                },
                                yearLabel: {show: false}
                            },
                            series: {
                                type: 'heatmap',
                                coordinateSystem: 'calendar',
                                data: datat.data.shuju
                            }
                        };
                        option && myChart3.setOption(option,true);
                        //console.log(option);
                    }
                });
            }, huoqushuju4(dater1) {
                var chartDom4 = document.getElementById('main4');
                var myChart4 = echarts.init(chartDom4);
                $.ajax({
                    type: 'get',
                    url: "http://127.0.0.1:8000/getDataByKey/?type=yitianxiaoshiyonghuqushi&riqi=" + dater1,//这里是url
                    dataType: 'json',
                    async: true,
                    success: function (datat, heads, status) {
                        //console.log(datat);
                        var option = {
                            title: {
                                text: '用户趋势-小时'
                            },
                            toolbox: {
                                right: 50,
                                feature: {
                                    myFull: {
                                        show: true,
                                        title: '全屏',
                                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                        onclick: (e) => {
                                            // 全屏查看
                                            if (chartDom4.requestFullScreen) { // HTML W3C 提议
                                                chartDom4.requestFullScreen()
                                            } else if (chartDom4.msRequestFullscreen) { // IE11
                                                chartDom4.msRequestFullScreen()
                                            } else if (chartDom4.webkitRequestFullScreen) { // Webkit
                                                chartDom4.webkitRequestFullScreen()
                                            } else if (chartDom4.mozRequestFullScreen) { // Firefox
                                                chartDom4.mozRequestFullScreen()
                                            }
                                            // 退出全屏
                                            if (chartDom4.requestFullScreen) {
                                                document.exitFullscreen()
                                            } else if (chartDom4.msRequestFullScreen) {
                                                document.msExitFullscreen()
                                            } else if (chartDom4.webkitRequestFullScreen) {
                                                document.webkitCancelFullScreen()
                                            } else if (chartDom4.mozRequestFullScreen) {
                                                document.mozCancelFullScreen()
                                            }
                                            window.onresize = function () {
                                                myChart4.resize()
                                            }
                                        }
                                    }
                                }
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {},
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: datat.data.shijian
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value}'
                                }
                            },
                            series: [
                                {
                                    name: '老用户',
                                    type: 'line',
                                    data: datat.data.laoyonghu
                                },
                                {
                                    name: '新用户',
                                    type: 'line',
                                    data: datat.data.xinyonghu
                                },
                                {
                                    name: '启动次数',
                                    type: 'line',
                                    data: datat.data.qidongcishu
                                },
                                {
                                    name: '启动用户',
                                    type: 'line',
                                    data: datat.data.qidongyonghu
                                },
                                {
                                    name: '版本老用户',
                                    type: 'line',
                                    data: datat.data.banbenlaoyonghu
                                }
                            ]
                        };
                        option && myChart4.setOption(option,true);

                    }
                });
            },
        }
    }).$mount('#daapp')
</script>
</body>
</html>